<template>
    <div id="shopping-List">
        <div class="shopping-List" v-for="(item,index) in this.$store.state.listData" :key="item.id">
            <!-- 复选框 -->
            <van-checkbox v-model="item.checked" checked-color="#ee0a24" icon-size=.4rem @click="sendChecked"></van-checkbox>

            <!-- 滑动删除 -->
            <van-swipe-cell>

            <!-- 商品卡片 -->
            <van-card
            :num="2"
            :price="item.price"
            :desc="item.parameter"
            :thumb="`../../../static/images/shoppingCart/shop-${item.imgUrl}.png`"
            >
            <!-- 商品卡片-标题 -->
            <template #title>
                <div class="van-card__title van-ellipsis">
                    {{item.title}}
                </div>
            </template>

            <!-- 加减按钮 -->
            <template #num>
                <van-button size="mini" class="shopping-List-btn" @click="countFn(index,'-')"> - </van-button>
                <input type="text" class="shopping-List-num" v-model="item.num" disabled>
                <van-button size="mini" class="shopping-List-btn" @click="countFn(index,'+')"> + </van-button>
            </template>

            </van-card>

            <!-- 滑动删除按钮 -->
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="slideClose(index)" />
            </template>
            </van-swipe-cell>
        </div>
    </div>
</template>


<script>
// 轻提示组件
import { Toast } from 'vant';
// 请求购物车列表数据
import {myGetshop} from '@/request/shoppingCartApi'
export default {
    props:["checked"],
    methods: {
        // 滑动点击删除
        slideClose(index) {
            this.$store.commit("slideClose",index);
        },
        
        // 产品数量加减功能
        countFn(index,symbol){
            this.$store.commit("countFn",{index,symbol});
            if(this.$store.state.listData[index].num == 0){
                Toast('不能再少啦');
            }
        },

        // 每个产品的复选框绑定事件。只要一个没有选中。全选按钮就需更改状态。将状态传给父组件全选框
        sendChecked(){
            for(let i in this.$store.state.listData){
                if(this.$store.state.listData[i].checked == true){
                    this.$emit("checked",true)
                }else if(this.$store.state.listData[i].checked == false){
                    this.$emit("checked",false)
                    break
                }
            }
        }

    },
    mounted() { 
        // 请求购物车列表数据
        myGetshop().then(
            res=>{
                this.img = res.shopList.imgUrl
                this.$store.commit("listData",res.shopList)
            }
        )
    },

    // 复选框思路
        // 合计功能由产品数量和产品价格控制
        // 主要根据修改 产品数量 统计计算合计价格。计算之前根据每个对象的 checked 的值判断是否合计
        // 合计价格在getters中计算，并将计算结果返回
};
</script>


<style lang="less" scoped>
.shopping-List{
    display: flex;
}
.shopping-List:last-of-type{
    padding-bottom: 200px;
}

.van-card__num{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
    margin-right: 20px;
    .shopping-List-num{
        width: 46px;
        height: 34px;
        text-align: center;
        color: black;
    }
    .shopping-List-btn{
        width: 45px;
        height: 34px;
        background-color: #e8e8e8;
        border-radius: 0px;
        border: 1px #dadada solid;
        font-weight: bold;
    }
}

    .van-card{
        background-color: skyblue;
        height: 180px;
        padding: 0;
        margin-bottom: 20px;    
    }

    .van-card:not(:first-child){
        margin-top: 0;
    }

    .shopping-List:first-of-type{
        margin-top: 29px;
    }


    .van-card__header{
        background-color: white;
        width: 664px;
        height: 180px;
        
        .van-card__thumb{
            width: 197px;
            height: 180px;
        }
    }
    .van-card__content{
        margin-left: 37px;
    }
    .van-checkbox{
        height: 180px;
        align-self: center;
        margin-left: 28px;
        margin-right: 10px;
    }

    .van-card__title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis ;
        width: 381px;
        height: 26px;
        line-height: 26px;
        margin-top: 19px;
        font-size: 26px;
    }   
    .van-card__desc{
        font-size: 24px;
        color: #acacac;
        height: 23px;
        line-height: 23px;
        margin-top: 12px;
    }

    .van-card__bottom{
        margin-top: 60px;
        font-size: 30px;
    }

    .goods-card {
        margin: 0;
    }

    .delete-button {
        height: 100%;
    }

</style>